<template>
    <el-form class="enterprise_step2" ref="formRef" :rules="rules" :model="form" scroll-to-error label-position="top">
        <el-alert title="您提交的资料已审核通过，请立即上传资料！" type="success" show-icon />
        <div class="grid_box">
            <div class="grid_left">
                <el-form-item label="营业执照图片" prop="licenseImg">
                    <UploadImg v-model:imageUrl="form.licenseImg" :fileSize="4" tip="JPG，JPEG，PNG，不超过4M" />
                </el-form-item>
                <el-form-item v-if="props.query.proposer == 2" label="代理人身份证人像面" prop="agentFrontImg">
                    <UploadImg v-model:imageUrl="form.agentFrontImg" :fileSize="2" tip="(JPG，JPEG，PNG，不超过2M)" />
                </el-form-item>
            </div>
            <div class="grid_center">
                <el-form-item label="法人身份证人像面" prop="corporateFrontImg">
                    <UploadImg
                        v-model:imageUrl="form.corporateFrontImg"
                        :fileSize="2"
                        tip="(JPG，JPEG，PNG，不超过2M)" />
                </el-form-item>
                <el-form-item v-if="props.query.proposer == 2" label="代理人身份证国徽面" prop="agentBackImg">
                    <UploadImg v-model:imageUrl="form.agentBackImg" :fileSize="2" tip="(JPG，JPEG，PNG，不超过2M)" />
                </el-form-item>
            </div>
            <div class="grid_right">
                <el-form-item label="法人身份证国徽面" prop="corporateBackImg">
                    <UploadImg
                        v-model:imageUrl="form.corporateBackImg"
                        :fileSize="2"
                        tip="(JPG，JPEG，PNG，不超过2M)" />
                </el-form-item>
                <el-form-item v-if="props.query.proposer == 2" prop="agentPaper">
                    <template #label>
                        <span>代理人委托书</span>
                        <span @click="downloadFileHandle" class="download_btn">下载文件</span>
                    </template>
                    <UploadImg v-model:imageUrl="form.agentPaper" :fileSize="4" tip="(JPG，JPEG，PNG，不超过4M)" />
                </el-form-item>
            </div>
        </div>
        <div class="footer">
            <el-button @click="submitHandle" type="primary">上传资料</el-button>
        </div>
    </el-form>
</template>

<script setup>
import UploadImg from '@/components/UploadImg.vue';
import request from '@/request';
import { throttle, downloadImgHandler, cloneDeep } from '@/commons/utils';
import { ElLoading, ElMessage } from 'element-plus';
import { reactive, ref } from 'vue';

const props = defineProps({
    query: { type: Object, default: () => ({}) }
});
const emit = defineEmits(['stepChange']);
const formRef = ref(null);
const form = reactive({
    shopId: props.query.shopId,
    //登录号 用户登录注册号，为用户在商户下唯一编号
    loginNo: '',
    //营业执照图片
    licenseImg: '',
    //法人身份证头像图片
    corporateFrontImg: '',
    //法人身份证国徽图片
    corporateBackImg: '',
    //代理人身份证头像图片
    agentFrontImg: '',
    //申请开户时proposer为0时，必填。代理人申请开户时上传
    agentBackImg: '',
    //代理人委托书
    agentPaper: ''
});
const rules = {
    licenseImg: [{ required: true, message: '请上传营业执照图片', trigger: 'change' }],
    corporateFrontImg: [{ required: true, message: '请上传法人身份证人像面', trigger: 'change' }],
    corporateBackImg: [{ required: true, message: '请上传法人身份证国徽面', trigger: 'change' }],
    agentFrontImg: [{ required: true, message: '请上传代理人身份证国徽面', trigger: 'change' }],
    agentBackImg: [{ required: true, message: '请上传代理人身份证国徽面', trigger: 'change' }],
    agentPaper: [{ required: true, message: '请上传代理人委托书', trigger: 'change' }]
};
// 下载代理人委托书
const downloadFileHandle = async () => {
    const { data } = await request('mandateServ');
    downloadImgHandler(data.url, '代理人委托书');
};
// 提交
const submitHandle = throttle(async () => {
    await formRef.value.validate();
    const loading = ElLoading.service({
        lock: true,
        text: '上传资料中',
        background: 'rgba(0, 0, 0, 0.7)'
    });
    form.loginNo = props.query.loginNo;
    const newForm = cloneDeep(form);
    if (props.query.proposer == 1) {
        ['agentFrontImg', 'agentBackImg', 'agentPaper'].forEach(key => delete newForm[key]);
    }
    const { code, msg } = await request('baofuOpenUpload', newForm);
    if (code === 0) {
        emit('stepChange');
    } else {
        ElMessage.error(msg);
    }
    loading.close();
});
</script>

<style lang="scss" scoped>
.enterprise_step2 {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 315px);
    .el-alert {
        display: flex;
        align-items: center;
        width: calc(100% - 200px);
        height: 40px;
        padding: 9px 16px;
        margin: 0 100px 24px;
        box-sizing: border-box;
        background: #f6ffed;
        border-radius: 2px;
        border: 1px solid #b7eb8f;
        .el-alert__content {
            padding: 0 3px;
            .el-alert__title {
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: rgba(0, 0, 0, 0.65);
            }
        }
    }
    :deep(.el-form-item) {
        // width: 155px;
        .el-form-item__label {
            margin-bottom: 12px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
        }
        .el-form-item__content {
            display: block;
            padding-left: 11px;
        }
    }
    .grid_box {
        flex: 1;
        display: flex;
        justify-content: space-between;
        padding: 0 100px;
    }
    .download_btn {
        margin-left: 10px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ff6b00;
        cursor: pointer;
        &:active {
            color: #ffb580;
        }
    }
    .desc {
        margin-top: 8px;
        font-size: 12px;
        line-height: 17px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
    }
    .footer {
        margin: 30px 0;
        text-align: center;
    }
}
</style>
